<%@ page contentType="text/html;charset=UTF-8" %>
		<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
		<html>
		<head>
			<title>内容发布管理</title>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="decorator" content="default" />
			<%@ include file="/WEB-INF/views/include/bootstrap-table.jsp"%>
			<script type="text/javascript" src="${ctxStatic}/echart/echarts.min.js"></script>
			
			<style type="text/css">
				.date-field-class{
				  width: 200px;
				}
			</style>
		</head>
		
<body>

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">汇总数据</li>
    <li>日新增数据</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
		    <div class="layui-row">
			<blockquote class="layui-elem-quote news_search">
					            <form id="searchForm">
					                <div class="layui-inline"> 
													按发布平台:
													<div class="layui-input-inline">
												     <select id="doAll"  name="doAll" style="width: 220px">
												       <option value="">全部平台</option>
												       <option value="1">抖音</option>
												       <option value="2">快手</option>
												       <option value="3">小红书</option>
												    </select>
										            </div>
													<span>按小时:</span>
													<div class="layui-input-inline">
													 <select id="doAll"  name="doAll" style="width: 220px">
													       <option value="">请选择</option>
													       <option value="1">近一小时</option>
													       <option value="2">近两小时</option>
													       <option value="3">近五小时</option>
													       <option value="4">近七小时</option>
													    </select>
													 </div>
													 平台账号:
													<div class="layui-input-inline">
										               <input id="accounts" name="accounts"  class="layui-input search_input" type="text">
										            </div>
													
							              <a  id="btn_search" class="layui-btn search_btn">查询</a>
							              <a  id="btn_reset" onclick="formResetBySearch();" class="layui-btn layui-btn-primary search_btn">重置</a>
							              <a  id="btn_reset" class="layui-btn layui-btn-primary search_btn">导出</a>
							                          <br/>
							                          <br/>
							                       <span style="padding-left: 42px">按周:</span> 
							                        <div class="layui-input-inline">
														 <select id="doAll"  name="doAll" style="width: 220px">
													       <option value="">请选择</option>
													       <option value="1">近一周</option>
													       <option value="2">近两周</option>
													       <option value="3">近三周</option>
													       <option value="4">近四周</option>
													    </select>
													 </div>
												    <span style="padding-left: 14px">按月:</span>
							                        <div class="layui-input-inline">
														 <select id="doAll"  name="doAll" style="width: 220px">
													       <option value="">请选择</option>
													       <option value="1">近一月</option>
													       <option value="2">近两月</option>
													       <option value="3">近三月</option>
													       <option value="4">近四月</option>
													    </select>
													 </div>
													  <br/>
							                          <br/>
							                        <span style="padding-left: 12px">按时间段:</span> 
							                        <div class="layui-input-inline">
													<input id="publishDate" name="publishType" type="text" readonly="readonly" maxlength="20" class="layui-input dateInput" style=""
														value="<fmt:formatDate value="${contentPublish.publishType}" pattern="yyyy-MM-dd HH:mm:ss"/>"
														onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"  placeholder="请输入开始时间"/>
													 </div>
												    <span style="padding-left: 28px">到:</span>
							                        <div class="layui-input-inline">
													<input id="publishDate" name="publishType" type="text" readonly="readonly" maxlength="20" class="layui-input dateInput" style=""
														value="<fmt:formatDate value="${contentPublish.publishType}" pattern="yyyy-MM-dd HH:mm:ss"/>"
														onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"  placeholder="请输入结束时间"/>
													 </div>
							          </div>
								</form>	
							</blockquote>
					</div>
<!-- 开关样式 -->
<div class='switch-wrap'>
<span id="list_span">列表</span>
    <input type='checkbox' id='switch'>
    <label for='switch'></label>
<span id="char_span">图形</span>
</div>


<div id="all_list_div">
		<div class="fixed-table-container" style="padding-bottom: 0px;"> 
		   <div class="fixed-table-header" style="display: none;">
		    <table></table>
		   </div> 
		   <div class="fixed-table-body"> 
		    <div class="fixed-table-loading table table-bordered table-hover" style="top: 50.6px;"> 
		     <span class="loading-wrap"> <span class="loading-text">Loading, please wait</span> <span class="animation-wrap"><span class="animation-dot"></span></span> </span> 
		    </div> 
		    <table data-toggle="bootstrap-table" data-search="true" data-show-columns="true" class="table table-bordered table-hover"> 
		     <thead>
		      <tr>
		       <th style="" data-field="0">
		        <div class="th-inner sortable both">
		         所属平台
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="1">
		        <div class="th-inner sortable both">
		         账号
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="2">
		        <div class="th-inner sortable both">
		        粉丝量
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="3">
		        <div class="th-inner sortable both">
		         阅读数/播放数
		        </div>
		        <div class="fht-cell"></div></th>
		     <th style="" data-field="4">
		        <div class="th-inner sortable both">
		         转发数
		        </div>
		        <div class="fht-cell"></div></th>
		   <th style="" data-field="5">
		        <div class="th-inner sortable both">
		         评论数
		        </div>
		        <div class="fht-cell"></div></th>
		   <th style="" data-field="6">
		        <div class="th-inner sortable both">
		         点赞数
		        </div>
		        <div class="fht-cell"></div></th>
		      </tr>
		     </thead> 
		     <tbody>
		      <tr id="tr-id-1" class="tr-class-1" data-index="0" data-object="{&quot;key&quot;:&quot;value&quot;}" data-title="bootstrap table">
		       <td id="td-id-1" class="td-class-1" style="" data-title="bootstrap table">
		                   小红书
		       </td>
		       <td style="" data-value="526">15102063655</td>
		       <td style="" data-text="122">3603</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-2" class="tr-class-2" data-index="1">
		       <td id="td-id-2" class="td-class-2" style="">
		       快手
		      </td>
		       <td style="">15512650321</td>
		       <td style="">623</td>
		       <td style="">123</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-3" class="tr-class-3" data-index="2">
		       <td id="td-id-3" class="td-class-3" style="">
		                   抖音
		       </td>
		       <td style="">13712650328</td>
		       <td style="">85</td>
		       <td style="">12</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-4" class="tr-class-4" data-index="3">
		       <td id="td-id-4" class="td-class-4" style="">
		       快手
		       </td>
		       <td style="">15512650322</td>
		       <td style="">1532</td>
		       <td style="">32</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-5" class="tr-class-5" data-index="4">
		       <td id="td-id-5" class="td-class-5" style="">
		        小红书
		       </td>
		       <td style="">13112345678</td>
		       <td style="">18</td>
		       <td style="">66</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		     </tbody> 
		     <tfoot style="display: none;">
		      <tr></tr>
		     </tfoot>
		    </table>
		   </div> 
		   <div class="fixed-table-footer">
		    <table>
		     <thead>
		      <tr></tr>
		     </thead>
		    </table>
		   </div> 
		  </div> 
		  </div>
		  
		  <div id="all_list_char_div" style="height: 500px;">
		     <div id="all_list_char" style="height: 100%;"></div>
		  </div>
</div>

<!-- 日增值量 -->
<div class="layui-tab-item">

   <div class="layui-tab-item layui-show">
     
		    <div class="layui-row">
			<blockquote class="layui-elem-quote news_search">
					            <form id="searchForm">
					                <div class="layui-inline"> 
													按发布平台:
													<div class="layui-input-inline">
												     <select id="doAll"  name="doAll" style="width: 220px">
												       <option value="">全部平台</option>
												       <option value="1">抖音</option>
												       <option value="2">快手</option>
												       <option value="3">小红书</option>
												    </select>
										            </div>
													 平台账号:
													<div class="layui-input-inline">
										               <input id="accounts" name="accounts"  class="layui-input search_input" type="text">
										            </div>
													
							              <a  id="btn_search" class="layui-btn search_btn">查询</a>
							              <a  id="btn_reset" onclick="formResetBySearch();" class="layui-btn layui-btn-primary search_btn">重置</a>
							              <a  id="btn_reset" class="layui-btn layui-btn-primary search_btn">导出</a>
							                          
							          </div>
								</form>	
							</blockquote>
					</div>

<!-- 开关样式 -->
<div class='switch-wrap'>
<span id="list_span_day">列表</span>
    <input type='checkbox' id='switch_day'>
    <label for='switch_day'></label>
<span id="char_span_day">图形</span>
</div>
	
	<div id="all_list_div_day">	
		<div class="fixed-table-container" style="padding-bottom: 0px;"> 
		   <div class="fixed-table-header" style="display: none;">
		    <table></table>
		   </div> 
		   <div class="fixed-table-body"> 
		    <div class="fixed-table-loading table table-bordered table-hover" style="top: 50.6px;"> 
		     <span class="loading-wrap"> <span class="loading-text">Loading, please wait</span> <span class="animation-wrap"><span class="animation-dot"></span></span> </span> 
		    </div> 
		    <table data-toggle="bootstrap-table" data-search="true" data-show-columns="true" class="table table-bordered table-hover"> 
		     <thead>
		      <tr>
		       <th style="" data-field="0">
		        <div class="th-inner sortable both">
		         所属平台
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="1">
		        <div class="th-inner sortable both">
		         账号
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="2">
		        <div class="th-inner sortable both">
		        日粉丝量
		        </div>
		        <div class="fht-cell"></div></th>
		       <th style="" data-field="3">
		        <div class="th-inner sortable both">
		         日阅读数/播放数
		        </div>
		        <div class="fht-cell"></div></th>
		     <th style="" data-field="4">
		        <div class="th-inner sortable both">
		        日 转发数
		        </div>
		        <div class="fht-cell"></div></th>
		   <th style="" data-field="5">
		        <div class="th-inner sortable both">
		         日评论数
		        </div>
		        <div class="fht-cell"></div></th>
		   <th style="" data-field="6">
		        <div class="th-inner sortable both">
		         日点赞数
		        </div>
		        <div class="fht-cell"></div></th>
		      </tr>
		     </thead> 
		     <tbody>
		      <tr id="tr-id-1" class="tr-class-1" data-index="0" data-object="{&quot;key&quot;:&quot;value&quot;}" data-title="bootstrap table">
		       <td id="td-id-1" class="td-class-1" style="" data-title="bootstrap table">
		                   小红书
		       </td>
		       <td style="" data-value="526">15102063655</td>
		       <td style="" data-text="122">3603</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-2" class="tr-class-2" data-index="1">
		       <td id="td-id-2" class="td-class-2" style="">
		       快手
		      </td>
		       <td style="">15512650321</td>
		       <td style="">623</td>
		       <td style="">123</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-3" class="tr-class-3" data-index="2">
		       <td id="td-id-3" class="td-class-3" style="">
		                   抖音
		       </td>
		       <td style="">13712650328</td>
		       <td style="">85</td>
		       <td style="">12</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-4" class="tr-class-4" data-index="3">
		       <td id="td-id-4" class="td-class-4" style="">
		       快手
		       </td>
		       <td style="">15512650322</td>
		       <td style="">1532</td>
		       <td style="">32</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		      <tr id="tr-id-5" class="tr-class-5" data-index="4">
		       <td id="td-id-5" class="td-class-5" style="">
		        小红书
		       </td>
		       <td style="">13112345678</td>
		       <td style="">18</td>
		       <td style="">66</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		       <td style="" >11</td>
		      </tr>
		     </tbody> 
		     <tfoot style="display: none;">
		      <tr></tr>
		     </tfoot>
		    </table>
		   </div> 
		   <div class="fixed-table-footer">
		    <table>
		     <thead>
		      <tr></tr>
		     </thead>
		    </table>
		   </div> 
		  </div> 
		 </div>
		  
		  <div id="all_list_char_div_day" style="height: 500px;">
		     <div id="all_list_char_day" style="width:1200px;height:500px;"></div>
		  </div>
</div>


</div>
  </div>
</div>


			
<script type="text/javascript">

   var dom = document.getElementById("all_list_char");
   var dom_day = document.getElementById("all_list_char_day");
   
   var myChart = echarts.init(dom);
   var myChart_day = echarts.init(dom_day);
   
   var app = {};
   option = null;
   option = {
       title: {
           text: '折线图(总量/平台账号)'
       },
       tooltip: {
           trigger: 'axis'
       },
       legend: {
           data: ['粉丝量', '阅读数/播放数', '转发数', '评论数', '点赞数']
       },
       grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
       },
       toolbox: {
           feature: {
               saveAsImage: {}
           }
       },
       xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['15102063655/抖音', '15102063656/抖音', '15502063656/快手', '15702063656/小红书', '13502063656/快手', '13102063656/快手', '13702063656/小红书']
       },
       yAxis: {
           type: 'value'
       },
       series: [
           {
               name: '粉丝量',
               type: 'line',
               stack: '总量',
               data: [120, 132, 101, 134, 90, 230, 210]
           },
           {
               name: '阅读数/播放数',
               type: 'line',
               stack: '总量',
               data: [220, 182, 191, 234, 290, 330, 310]
           },
           {
               name: '转发数',
               type: 'line',
               stack: '总量',
               data: [150, 232, 201, 154, 190, 330, 410]
           },
           {
               name: '评论数',
               type: 'line',
               stack: '总量',
               data: [320, 332, 301, 334, 390, 330, 320]
           },
           {
               name: '点赞数',
               type: 'line',
               stack: '总量',
               data: [820, 932, 901, 934, 1290, 1330, 1320]
           }
       ]
   };
   
   if (option && typeof option === "object") {
       myChart.setOption(option);
       myChart_day.setOption(option);
   }
   

 　　$("document").ready(function(){
	      $("#all_list_char_div").hide();
	      
	　　　　$("#switch").click(function(){
	　　　　　　if($(this).is(':checked')){
		        $("#all_list_char_div").show();
		        $("#all_list_div").hide();
	　　　　　　} else {
		        $("#all_list_div").show();
		        $("#all_list_char_div").hide();
	　　　　　　}
	       });
	
	　　　$("#list_span").click(function(){
		      $("#switch").click();
	     });
	
　　　　       $("#char_span").click(function(){
              $("#switch").click();
         });
　　　　       
　　　　       
　　　　       <!-- 日显示 -->
　　　　       $("#switch_day").click(function(){
	　　　　  	if($(this).is(':checked')){
		        $("#all_list_char_div_day").show();
		        $("#all_list_div_day").hide();
	　　　　　　} else {
		        $("#all_list_div_day").show();
		        $("#all_list_char_div_day").hide();
	　　　　　　}
       });
　　　　       
　　　　    $("#list_span_day").click(function(){
　　		   $("#switch_day").click();
　　　	});
　　　	
　　　　　 $("#char_span_day").click(function(){
　　　              $("#switch_day").click();
　　　         });
	
 });
 
 
 layui.use('element', function(){
	    var element = layui.element;
	  
	    $('.layui-tab-title').on('click', function(title) {

	        if(title.toElement.textContent=="汇总数据"){
	            //alert(11);
	        }else if(title.toElement.textContent=="日新增数据"){
	        	//document.getElementById('all_list_char_day').setAttribute('_echarts_instance_', '')
	        	//myChart_day.setOption(option);
	        	$("#all_list_char_div_day").hide();
	        }
	    });

});

</script>
			
			<jsp:include page="/WEB-INF/views/include/pageJs.jsp" />
		</body>
		
		</html>